<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="添加银行卡"></myHead>
      <div class="content">
         <div class="msg">请输入您的银行卡信息</div>
         <div class="tel">
            <p>持卡人</p>
            <div class="tel-r">
               <input type="text" placeholder="请输入持卡人姓名">
            </div>
         </div>
         <div class="tel">
            <p>银行卡号</p>
            <div class="tel-r">
               <input type="text" placeholder="请输入银行卡号" v-model="cardNum">
            </div>
         </div>
         <div class="tel">
            <p>所属银行</p>
            <div class="tel-r">
               <input type="text" placeholder="所属银行" :value="cardName" readonly>
            </div>
         </div>
         <div class="tel">
            <p>手机号码</p>
            <div class="tel-r">
               <input type="text" placeholder="请输入银行预留手机号码" v-model="tel">
               <p @click="getYZM">获取验证码</p>
            </div>
         </div>
         <div class="tel">
            <p>验证码</p>
            <div class="tel-r">
               <input type="text" placeholder="验证码" v-model="yzm">
            </div>
         </div>
      </div>
      <div class="btn" @click="confirm">确定</div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "extensionAddBankCard",
        components:{
            myHead
        },
        data(){
            return{
                cardNum:'',
                cardName:'',
                tel: '', // 手机号
                token:'',
                yzm:'', // 验证码
                code:'',
            }
        },
        methods:{
            getYZM(){
                if (!/^1[3-9][0-9]{9}$/.test(this.tel)) {return}
                this.$myAxios('index/Sms/send', 'post', {
                    tel: this.tel,
                    name: '绑定银行卡'
                }).then(res => {
                    this.token = res.data.token;
                    console.log(res.data)
                });
            },
            confirm(){
                this.$myAxios('index/Sms/verify', 'post', {
                    code: this.code,
                    token: this.token,
                    name:'',
                    mobile:''
                }).then(res => {
                    console.log(res)
                    this.$myAxios('courier/user/setWithdrawAccount.html', 'post', {
                        token: this.$store.state.userInfo.token_lt,
                        id: this.$myStorage.query(),
                        account:this.cardNum,
                        bankname:this.cardName
                    }).then(res => {
                        console.log(res.data)
                    });
                })

            }
        },
        watch:{
            cardNum(){
                // 建设银行：4367或6227；
                var reg1 = /^4367|^6227/;
                // 农业银行：6228或9559；
                var reg2 = /^6228|^9559/;
                // 工商银行：6222或9558
                var reg3 = /^6222|^9558/;
                // 邮政银行：6221或6210；
                var reg4 = /^6221|^6210/;
                // 交通银行：6014或5218；
                var reg5 = /^6014|^5218/;
                // 平安银行：6029或9988
                var reg6 = /^6029|^9988/;
                if (reg1.test(this.cardNum)) {
                    this.cardName = '建设银行';
                }else if (reg2.test(this.cardNum)) {
                    this.cardName = '农业银行';
                }else if (reg3.test(this.cardNum)) {
                    this.cardName = '工商银行';
                }else if (reg4.test(this.cardNum)) {
                    this.cardName = '邮政银行';
                }else if (reg5.test(this.cardNum)) {
                    this.cardName = '交通银行';
                }else if (reg6.test(this.cardNum)) {
                    this.cardName = '交通银行';
                }else {
                    this.cardName = '';
                }
            }
        }
    }
</script>

<style scoped>
   .wrap {
      padding-top: .5rem;
      box-sizing: border-box;
      background-color: #F5F5F5;
   }

   .tel {
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      padding-left: .15rem;
      padding-right: .1rem;
   }
   .tel>p:nth-child(1) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
      width: .6rem;
   }
   .tel-r {
      width: calc(100% - .7rem);
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .tel-r>input {
      width: 1.7rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      border: none;
      outline: none;
      color: #999999;
   }
   .tel-r>input::placeholder {
      color: #D1CFCF;
   }
   .tel-r>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FF6E00;
      width: .7rem;
      text-align: center;
   }

   .msg {
      height: .4rem;
      background-color: #F5F5F5;
      padding-left: .15rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #C0C0C0;
      line-height: .4rem;
   }

   .btn {
      width:3.41rem;
      height:.5rem;
      background:linear-gradient(90deg,rgba(255,141,65,1) 0%,rgba(255,141,65,1) 53%,rgba(255,109,0,1) 100%);
      box-shadow:0 .05rem .15rem 0 rgba(0, 0, 0, 0.05);
      border-radius:.24rem;
      font-size:.15rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
      text-align: center;
      line-height: .5rem;
      margin: .8rem auto 0;
   }
</style>